import { useState } from "react";
import { ContactData } from "./interface";
import Contact from "./Contact";

const contacts: ContactData[] = [
  { id: 0, name: "Alice", email: "alice@mail.com" },
  { id: 1, name: "Bob", email: "bob@mail.com" },
  { id: 2, name: "Taylor", email: "taylor@mail.com" }
];

function ContactList() {
  const [reverse, setReverse] = useState(false);

  const displayedContacts = [...contacts];
  if (reverse) {
    displayedContacts.reverse();
  }

  return (
    <>
      <label>
        <input type="checkbox" checked={reverse} onChange={e => setReverse(e.target.checked)} />
        以相反的顺序显示
      </label>
      <ul>
        {displayedContacts.map(c => (
          <li key={c.id}>
            <Contact contact={c} />
          </li>
        ))}
      </ul>
    </>
  );
}

export default ContactList;
